<template>
  <div>
    <!-- 查找 -->
    <template>
      <el-tag effect="plain">查找信息</el-tag>
      <el-select v-model="value" placeholder="请选择字段">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="keywords"
        placeholder="请输入关键字"
        width="100"
      ></el-input>
      <el-button @click="searchMsg()" type="primary" round icon="el-icon-search"
        >搜索</el-button
      >
    </template>

    <!-- 表格显示 -->
    <el-table border style="width: 100%" :data="salaryInfos">
      <!-- prop 代表 tableData 里面的对象 -->
      <el-table-column prop="id" label="序号" width="60"> </el-table-column>
      <el-table-column prop="department" label="部门名"> </el-table-column>
      <el-table-column prop="position" label="职位"> </el-table-column>
      <el-table-column prop="salary" label="薪资"> </el-table-column>
      <!-- 由于我们的状态是一个 switch 开关，可选的，所有需要用 slot 插槽 -->
      <el-table-column prop="status" label="是否全勤">
        <!-- scope 变量代表当前的这行记录信息 -->
        <template slot-scope="scope">
          <el-switch
            @change="switchChangeHandler(scope)"
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="信息操作">
        <template slot-scope="scope">
          <el-button
            @click="setEditId(scope), (dialogFormVisible = true)"
            type="primary"
            icon="el-icon-edit"
            circle
            style="margin-right: 10px"
          ></el-button>
          <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="薪资" :label-width="formLabelWidth">
                <el-input v-model="form.salary" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="editHandler(), (dialogFormVisible = false)"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <el-button
            @click="deleteHandler(scope)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="limit"
      layout="prev, pager, next"
      :total="counter"
    >
    </el-pagination>
  </div>
</template>

<script>
/* 调用接口，请求用户列表数据 */
import {
  getSalaryList,
  deleteSalary,
  updateStatus,
  updateSalary,
  getSalaryListCounter,
  findeSalaryMsg,
} from "../api/salary.js";
export default {
  name: "Admin-salary-list",
  async created() {
    this.counter = (await getSalaryListCounter()).data.length;
    this.getSalarys();
  },
  methods: {
    async getSalarys() {
      // 这个里面调用接口
      const infos = await getSalaryList({ page: 1, limit: this.limit });
      //   console.log("infos", infos);
      this.salaryInfos = infos.data;
    },
    async handleCurrentChange(page) {
      this.page = page;
      const infos = await getSalaryList({ page, limit: this.limit });
      this.salaryInfos = infos.data;
    },
    async switchChangeHandler(scope) {
      await updateStatus(scope.row.id, scope.row.status);
      /* 修改薪资状态 */
      let salary = Number(scope.row.salary);
      if (scope.row.status) {
        salary += 1000;
        await updateSalary(scope.row.id, salary.toString());
      } else {
        salary -= 1000;
        await updateSalary(scope.row.id, salary.toString());
      }

      const infos = await getSalaryList({ page: this.page, limit: this.limit });
      this.salaryInfos = infos.data;
    },
    setEditId(scope) {
      this.editId = scope.row.id;
    },
    async editHandler() {
      await updateSalary(this.editId, this.form.salary);
      const infos = await getSalaryList({ page: this.page, limit: this.limit });
      this.salaryInfos = infos.data;
      if (this.value != "null" && this.value) {
        this.searchMsg();
      }
    },
    async deleteHandler(scope) {
      await deleteSalary(scope.row.id);
      const infos = await getSalaryList({ page: this.page, limit: this.limit });
      this.salaryInfos = infos.data;
      if (this.value != "null" && this.value) {
        this.searchMsg();
      }
    },
    async searchMsg() {
      if (this.value != "null" && this.value) {
        const infos = await findeSalaryMsg(this.value, this.keywords);
        this.counter = infos.data.length;
        this.limit = infos.data.length;
        this.salaryInfos = infos.data;
      } else {
        this.limit = 5;
        this.counter = (await getSalaryListCounter()).data.length;
        this.getSalarys();
      }
    },
  },
  data() {
    return {
      counter: 0,
      page: 1,
      limit: 5,
      salaryInfos: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        salary: "",
      },
      editId: 0,
      formLabelWidth: "120px",
      options: [
        {
          value: "department",
          label: "部门名",
        },
        {
          value: "position",
          label: "职位",
        },
        { value: "null", label: "---无---" },
      ],
      value: "",
      /* 搜索关键字 */
      keywords: "",
    };
  },
};
</script>

<style scoped lang="less">
.el-radio--medium.is-bordered {
  margin: 10px;
}
.el-input {
  margin: 0 10px;
  width: 260px;
}
.el-tag--plain {
  margin-right: 10px;
}
</style>